<template>
  <div id="jdcoupons">  

      <el-form ref="form"  label-width="80px">           
          <el-row>
            <el-col :span="24" >  
                <el-page-header @back="goBack"   :content='this.$route.query.name+"-金豆券调控"'  style="margin-bottom:10px;"></el-page-header>
            </el-col>
          </el-row>
           <el-row>
           
            <el-col :span="16" >  
                 <el-button class="custom_color_button" type="primary" v-for="(item,index) in tj_list" :key="index" >
                     {{ item.title }}:{{ item.num }}
                 </el-button>
            </el-col>
            <el-col :span="8" style="text-align: right;margin-bottom:10px;">
                <el-button class="custom_color_button" type="primary" @click="add_but()">金豆券调控</el-button>
                <el-button class="custom_color_button" type="primary" @click="see_but()">调控信息</el-button>    
            </el-col>
          </el-row>
    </el-form>

   <!-- 渲染数据list -->
   <jdcoupons-list :datalist="datalist" @up_list_fun="list_fun" @up_tj_fun="tj_fun"> </jdcoupons-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

       <!-- 添加金豆券 -->
        <el-dialog title="添加金豆券" :visible.sync="add_mtk"  width="400px">
            <div style="width:100%;"> 

              <el-form ref="form"   label-width="80px" style="width:100%;">
                

                <el-form-item label="果种选择">
                    <el-select  v-model="select_num1" placeholder="请选择果种">
                        <el-option  v-for="(item,index) in select_data1" :key="index" 
                        :label="item.title" :value="item.maid"></el-option>
                    </el-select>
                </el-form-item>
     

            </el-form>

                <div style="text-align: center;width:50%;margin:auto;">
                    <el-button type="primary" class="custom_color_button" style="width:80%;" @click="add_qr_but()">确认</el-button>
                </div>

            </div> 
        </el-dialog>


        <!-- 查看 -->
        <el-dialog title="查看" :visible.sync="see_mtk"  width="550px">
            <div style="width:100%;"> 

                <el-table :data="see_mtk_form.list_data" style="width: 100%" height="500" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                      :row-class-name="tableRowClassName"  :border="true">

                    <el-table-column label="时间"  align='center' >                   
                        <template slot-scope="scope">                   
                            <span >{{ scope.row.time }}</span>
                        </template>
                    </el-table-column>
                     <el-table-column label="名称"  align='center' >                   
                        <template slot-scope="scope">                   
                            <span >{{ scope.row.manor_title }}</span>
                        </template>
                    </el-table-column>

                
               </el-table>  

               <div style="margin-top:20px;text-align: center;">
                    <el-pagination
                        background
                        @current-change="handleCurrentChange1"
                        :page-size="10"  
                        layout="prev, pager, next, jumper"
                        :total="count1">
                    </el-pagination>
               </div>

            </div> 
        </el-dialog>

        
     
  </div>
</template>

<script>
import JdcouponsList from '@/view/Exchangeorder/JdcouponsList'
export default {
  name: 'jdcoupons',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        my_uid:'',
        add_mtk:false,
        select_data1:[],
        select_num1:'',
        
        see_mtk : false,
        see_mtk_form:{
            list_data:[]
        },
        page1:1,
        count1:0,

        tj_list:[]

    }
  },
 components:{
    JdcouponsList
  },
  created(){
      this.my_uid = this.$route.query.id
      this.list_fun()
      this.gz_list()
      this.tj_fun()
  },
  mounted (){
    
  },
  methods: {
      tj_fun(){
        this.post("/gdb_ticket/totalOfSomeone", {
              uid:this.my_uid
	        }).then(res => {
            this.tj_list = res.result

            console.log(this.tj_list)
         })
      },
      list_fun(){
          this.post("/gdb_ticket/listOfData", {
              page:this.page,
              uid:this.my_uid
	        }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list

            //console.log(res)
         })
       },
       see_fun(){
          this.post("/gdb_ticket/listOfLogData", {
              page:this.page1,
              uid:this.my_uid
	        }).then(res => {
            this.count1 = res.result.count
            this.see_mtk_form.list_data = res.result.list

            //console.log(res)
         })
       },
       gz_list(){
            this.post("/manor/manorOption", {
             
	        }).then(res => {
                this.select_data1 = res.result
                //console.log(res)
         })
      },
      add_but(){
          this.add_mtk = true
      },
      add_qr_but(){
         this.post("/gdb_ticket/sendToSomeone", {
                uid:this.my_uid,
                maid:this.select_num1
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.add_mtk = false
                    this.list_fun()
                     this.tj_fun()
                }else {
                this.open1(res.message,'warning')
                }

       })
      },
      see_but(){
           this.see_fun()
           this.see_mtk = true
      },
      goBack() {
        this.$router.go(-1)
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      },
      handleCurrentChange1(val) {
        this.page1 = val
        this.see_fun()
        console.log(`当前页: ${val}`);
      },
  }
}
</script>


<style scoped>
</style>
